<template>
  <div id="per">
    <div  id=imgp v-for="img in user" :key="img.userId">
      <img  :src="getPic(img.headPic)"/></div>
    <div id="perdown">
    <!-- <div v-if=""></div> -->
      <ul>
        <router-link to="/index/person/pmy" tag="li">
          <a>修改信息</a>
        </router-link>
        <router-link to="/index/person/phead" tag="li">
          <a>更换头像</a>
        </router-link>
        <router-link to="/index/person/pmypwd" tag="li">
          <a>修改密码</a>
        </router-link>
        <!-- <router-link to="/index/person" tag="li">
          <a>我的订单</a>
        </router-link> -->
        <!-- <router-link to="/login" tag="li">
          <a>我的评价</a>
        </router-link> -->
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
     user : []
    };
  },
  methods:{
    getPic(pic){
      let path = "http://localhost:3000/upload/"+pic;
      return path;
    }
  },
created(){
   this.$axios.get("http://localhost:3000/users/uploadHeadPic/24")
   .then(res =>{
     this.user=res.data.data;
   })
   .catch(err =>{
     
   })
}
}
</script>
<style >
* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}
#headPic {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: 1px solid #ccc;

  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
#headPic:hover #mask {
  display: block;
}
#mask {
  width: 150px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
#innerImg {
  position: absolute;
  left: 30px;
  top: 35px;
  /* transform: translate(-50%,-50%);    适用于不清楚自己的尺寸情况 */
}
#img222 {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}
#per {
  width: 300px;
  height: 500px;
  margin: 20px 80px;
  /* background-color: #00f; */
}
#perdown {
  width: 100px;
  height: 400px;
  margin: 100px auto;
  /* background-color: red; */
}
#perdown ul li {
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  /* text-align: center; */

  /* background-color: #ff0; */
}
#perdown ul li:hover {
  background-color: rgb(247, 179, 179);
}
#imgp img{
  width: 100px;
  height: 100px;
  -moz-border-radius:20px;
  -webkit-border-radius:20px; 
  border-radius:20px;

}
</style>